// 基类
class Compiler{
  constructor(el,vm){
    // 判断el是否为元素，若否就获取他
    this.el = this.isElementNode(el)?el:document.querySelector(el);
    this.vm = vm;
    // 把当前节点中的元素获取，放到内存中
    let fragment = this.node2fragment(this.el);
    // 把节点中的内容进行替换
    this.compile(fragment)
    // 把内容塞到页面中
    this.el.appendChild(fragment);
  }
  isDirective(attrName){
    return attrName.startsWith('v-');
  }
  compileElement(node){
    let attributes = node.attributes;
    [...attributes].forEach(attr=>{
      let {name,value} = attr;
      if (this.isDirective(name)) {
        console.log(node);
        console.log(value);
        
        node.value = value
        
      }
    })
  }
  compileText(node){
    
  }
  compile(node){//编译农村中的dom节点
    let childNodes = node.childNodes;
    [...childNodes].forEach(child=>{
      if (this.isElementNode(child)) {
        this.compileElement(child);
        
      }else{

      }
    })
  }
  node2fragment(node){
    // 创建一个文档碎片
    let fragment = document.createDocumentFragment();
    let firstChild;
    while (firstChild = node.firstChild) {
      fragment.appendChild(firstChild);
    }
    return fragment;
  }
  isElementNode(node){
    return node.nodeType === 1;
  }
}
class Vue{
  constructor(options){
    this.$el = options.el;
    this.$data = options.data;
    if(this.$el){
      new Compiler(this.$el,this);
    }
  }
}